<script setup lang="ts">
import NewsLive from "@/components/NewsLive/index.vue";
import { getSvg } from "@/utils";
import useFetchNewsDtl from "./hooks/useFetchNewsDtl.ts";
const { resData, route, router } = useFetchNewsDtl();
const id = route.params.id as string;
</script>
<template>
  <div class="news-detail">
    <div class="w-full h-40 top" v-if="route.params.id">
      <div class="absolute top-10 left-15" @click="router.back()">
        <img :src="getSvg('back(1)')" class="w-10 h-20" alt="" />
      </div>
      <div class="text-20 text-white font-500 py-14 h-full center">
        {{ $t("title02") }}
      </div>
    </div>
    <div class="banner-bg">
      <van-image width="100%" height="6rem" fit="cover" :src="resData?.img_url">
      </van-image>
    </div>
    <div class="flex-column">
      <div class="px-16">
        <div class="article-title text-18">
          <template v-if="resData?.title">
            {{ resData?.title }}
          </template>
          <template v-else>
            <van-skeleton-paragraph />
            <van-skeleton-paragraph />
          </template>
        </div>
      </div>

      <div class="px-16">
        <div class="publisher-info">
          <div class="text flex-1 text-12">
            <div class="name">
              <template v-if="resData?.publisher">
                {{ resData?.publisher }}
              </template>
              <template v-else>
                <van-skeleton-paragraph row-width="50%" />
              </template>
            </div>
            <div class="date">
              <template v-if="resData?.publish_time">
                {{ resData.publish_time }}
              </template>
              <template v-else>
                <van-skeleton-paragraph row-width="90%" />
              </template>
            </div>
          </div>
        </div>
      </div>
      <div class="px-16">
        <div
          id="RichTextWrapId"
          v-if="!!resData?.content"
          v-html="resData?.content"
          class="text-16 content"
        ></div>
        <div v-else>
          <van-skeleton-paragraph v-for="(,index) in 15" :key="index" />
        </div>
      </div>
      <div class="p-16">
        <NewsLive class="bg-white" :id="id" />
      </div>
    </div>
    <!-- <Copyright /> -->
  </div>
</template>

<style scoped lang="scss">
.news-detail {
  background-color: #fff;
  .top {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #149891;
  }
  .banner-bg {
    width: 100%;
    padding: 16px;
    :deep(.van-image) {
      img {
        width: 100%;
        border-radius: 10px;
      }
    }
  }
  .article-title {
    font-weight: 550;
  }
  .publisher-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8f8f8;
    border-radius: 12px 12px 12px 12px;
    padding: 6px 10px;
    .text {
      font-size: 14px;
      display: flex;
      flex-direction: column;
      row-gap: 4px;
      line-height: 20px;
      .date {
        color: #cbcbcb;
      }
    }
    .share {
      display: flex;
      align-items: center;
      column-gap: 2px;
      padding: 4px 8px;
      border: 1px solid gray;
      border-radius: 8px;
      img {
        width: 15px;
      }
      i {
        font-size: 12px;
        color: #444444;
      }
    }
  }
  .flex-column {
    display: flex;
    flex-direction: column;
    row-gap: 10px;

    .next-article {
      background: rgba(79, 182, 255, 0.4);
      font-weight: 500;
      font-size: 12px;
      color: #444444;
      border-radius: 10px;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      column-gap: 12px;
    }

    :deep(#RichTextWrapId) {
      img,
      video {
        width: 100% !important;
      }
    }
  }
  .content {
    :deep(p) {
      line-height: 1.5 !important;
    }
  }
}
</style>
